<template>
  <div class="recharge-page">
    <div style="display: flex;margin-bottom: 40px">
      <span><h1 style="font-size: 30px">请充值</h1></span>
      <span><p style="font-size: 30px;margin-left: 80px">余额:<span
          style="color: #ff4949">{{ user.money }}</span></p></span>
    </div>
    <div class="form-group">
      <el-input-number v-model="num" :min="1" :max="1000" :step="1" size="large">
        <template #suffix><span>RMB</span></template>
      </el-input-number>
    </div>
    <button type="submit" @click="passForm = true">充值</button>
  </div>
  <!-- 添加-->
  <el-dialog v-model="passForm" title="请输入支付密码" width="600" center>
    <el-form class="form-row">
      <div class="form-column">
        <el-form-item label="请输入支付密码" label-width="20%">
          <el-input type="password" v-model="payPassword" autocomplete="off" placeholder="请输入支付密码"/>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="passForm = false" style="width: 70px;margin-right: 15px">取消</el-button>
        <el-button type="primary" @click="reCharge" style="width: 70px;">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加-->
</template>

<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const payPassword = ref("")
const passForm = ref(false)
const router = useRouter()
const num = ref(1)
const user = ref({
  money: '',
});

//充值
function reCharge() {
  userApi.updateMoney({
    money: num.value,
    payPassword: payPassword.value
  })
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          router.push("/user/info")
          passForm.value = false;
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

function getInfo() {
  userApi.getInfo()
      .then(resp => {
        user.value = resp.data;
        console.log(resp.data, "user")
      })
}

getInfo();
</script>

<style scoped>
.recharge-page {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  text-align: center;
  margin-bottom: 15px;
}


button {
  margin-top: 30px;
  width: 100%;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}
</style>